<template>
	<LayoutBody>
		<LayoutContent>
			<div class="home-global-overview">
				<p class="head">全局概览</p>
				<Row class="datas" :gutter="40">
					<Col span="12">
						<Row>
							<Col span="8">
								<h3 class="title">0.00</h3>
								<p class="text">今日销售（已支付）</p>
							</Col>
							<Col span="8">
								<h3 class="title">0.00</h3>
								<p class="text">今日客单价（已支付）</p>
							</Col>
							<Col span="8">
								<h3 class="title">1,647.70</h3>
								<p class="text">累计待付款金额</p>
							</Col>
						</Row>
					</Col>
					<Col span="12">
						<Row>
							<Col span="6">
								<h3 class="title">18</h3>
								<p class="text"><router-link to="">待付款订单</router-link></p>
							</Col>
							<Col span="6">
								<h3 class="title">4</h3>
								<p class="text"><router-link to="">待确认订单</router-link></p>
							</Col>
							<Col span="6">
								<h3 class="title">2</h3>
								<p class="text"><router-link to="">待发货订单</router-link></p>
							</Col>
							<Col span="6">
								<h3 class="title">14</h3>
								<p class="text"><router-link to="">售后订单</router-link></p>
							</Col>
						</Row>
					</Col>
				</Row>
			</div>
			<Tabs>
		        <TabPane label="时段分布">
		        	
		        </TabPane>
		    </Tabs>
	    </LayoutContent>
	</LayoutBody>
</template>

<script>
import LayoutBody from '@/components/layout/body.vue';
import LayoutContent from '@/components/layout/content.vue';
export default {
	components: {
		LayoutBody,
		LayoutContent
	},
	data() {
		return {
			
		}
	},
    methods: {
        
    }
}
</script>

<style scoped lang="less">
.home-global-overview {
	color: #000;
	.head {
		padding: 10px 10px 20px;
		font-size: 14px;
	}
	.datas {
		padding: 20px;
	}
	.title {
		font-size: 36px;
		font-weight: 400;
	}
}
</style>